<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Scoped CSS Variables and JS</title>
</head>
<body>
  <h2>Update CSS Variables with <span class='hl'>JS</span></h2>

  <div class="controls">
    <label for="spacing">Spacing:</label>
    <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

    <label for="blur">Blur:</label>
    <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

    <label for="base">Base Color</label>
    <input type="color" name="base" value="#8aa8af">
	<br>
	  
	<code class="result">
		img {
			padding: <label id="code-spacing">10px</label>;
			filter: blur(<label id="code-blur">10px</label>);
		  background: <label id="code-base">#8aa8af</label>;
		}
	</code>
  </div>

  <img src="http://ofjku7mlm.bkt.clouddn.com/16-12-22/39048308-file_1482385934460_1316f.jpg">

  <style>

    /*
      misc styles, nothing to do with CSS variables
    */
	  
	  :root {
		  --spacing: 11px;
		  --blur: 5px;
		  --base: #8aa8af;
	  }
	  
	  img {
		  padding: var(--spacing);
		  background: var(--base);
		  filter: blur(var(--blur));
	  }
	  
	  .hl {
		  color: var(--base);
	  }

	  
    body {
      text-align: center;
    }

    body {
      background: #193549;
      color: white;
      font-family: 'helvetica neue', sans-serif;
      font-weight: 100;
      font-size: 1.5em;
    }

    .controls {
      margin-bottom: 1em;
    }

    input {
      width:100px;
    }
	  
	  
  </style>

  <script>
	  const inputs = document.querySelectorAll('.controls input');	  
	  
	  function handleUpdate() {
		  const suffix = this.dataset.sizing || ''; // 根据 data-sizing 获取参数的后缀
		  document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); // 设置页面 CSS 变量的值
		  document.getElementById(`code-${this.name}`).innerText = this.value + suffix; // 页面参数实时显示
	  }
	  
	  inputs.forEach( input => input.addEventListener('change', handleUpdate));
	  inputs.forEach( input => input.addEventListener('mousemove', handleUpdate)); // 在滑块拖动过程中也实时变化
	  
	  
//	  以下为跨浏览器事件处理及 forEach 兼容性处理
//	  var EventUtil = {
//		  addHandler : function(element, type, handler) {
//			  if (element.addEventListener) {
//				  element.addEventListener(type, handler, false);
//			  } else if (element.attachEvent) {
//				  element.attachEvent("on" + type, handler);
//			  } else {
//				  element["on" + type] = handler;
//			  }
//		  },
//		  
//		  removeHandler: function(element, type, handler) {
//			  if (element.removeEventListener) {
//				  element.removeEventListener(type, handler, false);
//			  } else if (element.detachEvent) {
//				  element.attachEvent("on" + type, handler);
//			  } else {
//				  element["on" + type] = null;
//			  }
//		  }
//	  };
//	  
//	  if (!NodeList.prototype.forEach) {
//    NodeList.prototype.forEach = function(fn, scope) {
//        for(var i = 0, len = this.length; i < len; ++i) {
//            fn.call(scope, this[i], i, this);
//        }
//    }
//};
//	  
//	  inputs.forEach( input => EventUtil.addHandler(input, 'change', handleUpdate));
//	  inputs.forEach( input => EventUtil.addHandler(input, 'mousemove', handleUpdate));
	 
	  
  </script>

</body>
</html>
